import React from 'react'
import { Tooltip, Tag } from 'antd'
import {
  COMMUNICATION_CHAIN_STATUS,
} from '@/pages/Dashboard/components/CrossChain/enums'

import './CustomCard.less'
import { STATUS } from '@/Utils/CONST'

const CustomCard = (props) => {
  const { data, clickable = true, className = '', onClick, title = '无', status = 'FAIL', subTitle, items, hasTag = false, tagText = '', tagColor = '#1e9b88' } = props
  return (
    <div className={`item org-item ${clickable ? '' : 'disabled-click'} ${className}`} onClick={onClick}>
      <div className="header">
        <div className="status">
          <Tooltip placement="top" title={(STATUS[status] || {}).tooltip}>
            <img alt="" src={(STATUS[status] || {}).icon || require('@/images/fabric/error.svg')} />
          </Tooltip>
        </div>
        <div className="name-wrapper">
          <div className="title-wrapper">
            <div title={title} className={'name ellipsis'}>
              {title}
            </div>
            <Tag color={COMMUNICATION_CHAIN_STATUS[data.status].status}>{COMMUNICATION_CHAIN_STATUS[data.status].label || '-'}</Tag>
            {
              hasTag &&
              <Tag className="tag" color={tagColor}>{tagText}</Tag>
            }
          </div>
          {subTitle &&
            <div className="org-address ellipsis">{subTitle}</div>
          }
        </div>
      </div>
      <div className="orgation-info info">
        {items.map((item) => (
          <div key={item.key} className="info-item">
            <div>{item.title}</div>
            <div className="info-value ellipsis league-text" title={item.value}>{item.value}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default CustomCard
